<template>
    <div>
        <p class="moviesType">类型：
            <template v-for="item in arr" :key="item._id">
                <!-- <div  v-if="item._id==chooseType" class="movieSpan active">
                    {{ item.name }}
                </div>
                <div v-else  @click="chooseType=item._id" class="movieSpan ">
                    {{ item.name }}
                </div> -->
                <div   @click="chooseType=item._id" :class="(item._id==chooseType)?'movieSpan active':'movieSpan'">
                    {{ item.name }}
                </div>

            </template>

        </p>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const arr = ref([
    {
        "_id": "",
        "name": "全部"
    },
    {
        "_id": "66383656659a454f4604aed3",
        "name": "喜剧"
    },
    {
        "_id": "66383669659a454f4604aed4",
        "name": "爱情"
    },
    {
        "_id": "6638366f659a454f4604aed5",
        "name": "动作"
    },
    {
        "_id": "66383673659a454f4604aed6",
        "name": "科幻"
    },
    {
        "_id": "6638367b659a454f4604aed7",
        "name": "动画"
    },
    {
        "_id": "66383681659a454f4604aed8",
        "name": "悬疑"
    },
    {
        "_id": "66383689659a454f4604aed9",
        "name": "犯罪"
    },
    {
        "_id": "6638368c659a454f4604aeda",
        "name": "惊悚"
    },
    {
        "_id": "66383692659a454f4604aedb",
        "name": "冒险"
    },
    {
        "_id": "66383696659a454f4604aedc",
        "name": "音乐"
    },
    {
        "_id": "6638369a659a454f4604aedd",
        "name": "历史"
    },
    {
        "_id": "6638369e659a454f4604aede",
        "name": "奇幻"
    },
    {
        "_id": "663836a1659a454f4604aedf",
        "name": "恐怖"
    },
    {
        "_id": "663836a8659a454f4604aee0",
        "name": "战争"
    },
    {
        "_id": "663836b0659a454f4604aee1",
        "name": "传记"
    },
    {
        "_id": "663836b4659a454f4604aee2",
        "name": "歌舞"
    },
    {
        "_id": "663836b9659a454f4604aee3",
        "name": "武侠"
    },
    {
        "_id": "663836c2659a454f4604aee4",
        "name": "灾难"
    },
    {
        "_id": "663836cb659a454f4604aee5",
        "name": "纪录片"
    },
    {
        "_id": "682f32c447bd398e5f05fd14",
        "name": "剧情"
    },
    {
        "_id": "682fe58247bd398e5f05fd20",
        "name": "家庭"
    }
]);
const chooseType = ref('')
</script>

<style scoped>
.moviesType {
    display: flex;
}

.movieSpan {
    padding: 2px 5px;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 14px;
}

.active {
    background-color: chartreuse;
}
</style>